<template>
  <div class="comment">
    <el-input
      type="textarea"
      :rows="4"
      v-model="content"
      @blur="submitComment"
      placeholder="请输入评论内容"
    />

    <el-button @click="submitComment" :loading="isSubmitting">提交评论</el-button>
    <ul class="comment-list">
      <li v-for="(item, index) in comment" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  name: 'Comment-v1',
  components: {

  },
  data() {
    return {
      content: '',
      isSubmitting: false,
      comment: [],
      comment2: []
    }
  },
  mounted() {

  },
  methods: {
    submitComment() {
      if (!this.content) {
        this.$message.error('评论内容不能为空')
        return
      }
      this.isSubmitting = true
      setTimeout(() => {
        this.comment.unshift(this.content)
        console.log('评论内容：', this.content);
        console.log('所有：', this.comment);
        this.content = ''
        this.isSubmitting = false
      }, 1000)
    },
  },
}
</script>

<style scoped>
.comment {
  margin-bottom: 20px;
}

.comment-list {
  list-style: none;
  padding: 0;
}
</style>
